<template>
  <div class="service-view">
    <div class="top-view">
      <div class="top-left">
        <box-view name="入站车辆类型">
          <vehicle-type :serviceData="service.leftData"></vehicle-type>
        </box-view>
      </div>
      <div class="top-middle">
        <middle-view :dataVal="service.topData"></middle-view>
      </div>
      <div class="top-right">
        <box-view name="配件库存统计">
          <div class="icon-warning">
          <!-- hover -->
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover">
              <div class="popover-content">
                <p>说明</p>
                <p>1、库存充足：当前库存量高于未来三天的销量之和；</p>
                <p>2、库存不足：当前库存量高于未来三天的销量之和的40%且不到100%时，请及时补货，以免影响销售；</p>
                <p>3、请及时补货：当前库存量低于未来三天的销量之和的40%时，请及时补货，以免影响销售；</p>
              </div>
              <i class="el-icon-warning" slot="reference"></i>
            </el-popover>
          </div>
          <MountingsStore :partsData="service.rightData"></MountingsStore>
        </box-view>
      </div>
    </div>
    <div class="bottom-view">
      <div class="bottom-left">
        <box-view name="销售额统计">
          <echarts-view :option="setEcharts(service.dataAll)"></echarts-view>
        </box-view>
      </div>
      <div class="bottom-right">
        <box-view name="配件销售详情">
          <!-- <table-view :titleList="titleList" :list="service.dataAll" /> -->
          <div class="table-view">
            <div @click='setTabValue(false)' class="tab-view"  :class="!tabValue ? 'tab-view2' : ''">易损件</div>
            <div @click='setTabValue(true)'  class="tab-view" :class="tabValue ? 'tab-view2' : ''">配件</div>
          </div>
          <div class="echarts-view">
            <echarts-view :option="setEcharts2(service.rightData)"></echarts-view>
          </div>
        </box-view>
      </div>
    </div>
  </div>
</template>

<script>
import EchartsView from "../components/echarts/index.vue";
import TableView from "@/components/TableView/index.vue";
import BoxView from "@/components/BoxView/index.vue";
import MiddleView from "@/components/MiddleView/index.vue";
import VehicleType from "../components/VehicleType/indexSix";
import MountingsStore from "../components/MountingsStore/index.vue";

export default {
  name: "ServiceView",
  mixins: [],
  components: {
    EchartsView,
    TableView,
    BoxView,
    MiddleView,
    VehicleType,
    MountingsStore,
  },
  props: ["service"],
  data() {
    return {
      tabValue:false,
      objVal:{
        '轮胎':0,
        '刹车片':0,
        '刹车油':0,
        '机油':0,
        '防冻液':0,
        '火花塞':0,
        '喷油嘴':0,
        '传动带':0
      },
      // 销售额统计
      optionAll: {
        tooltip: {
          axisPointer: {
            type: "shadow", // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
            snap: true, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
          },
          showContent: true, // 是否显示提示框浮层，默认显示
          alwaysShowContent: true, // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
          triggerOn: "mousemove", // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
          confine: true, // 是否将 tooltip 框限制在图表的区域内
          backgroundColor: "rgba(0,0,0,0.5)", // 提示框浮层的背景颜色
          padding: 15, // 提示框浮层内边距，单位px
          // position: "left",
          textStyle: {
            color: "#fff", // 文字的颜色
          },
        },
        legend: {
          // data:[],
          data: ["销售额", "销售量", "同期销售额", "同期销售量"],
          textStyle: {
            color: "#fff",
          },
          formatter: function (value) {
            return value;
          },
        },
        xAxis: [
          {
            splitArea: { show: false },
            axisTick: {
              alignWithLabel: true,
            },
            data: [],
            lineStyle: {
              color: "#fff",
            },
            axisLabel: {
              color: "#fff",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "销售额（元）",
            position: "left",
            nameTextStyle: {
              color: "#fff",
            },
            lineStyle: {
              color: "#fff",
            },
            axisLabel: {
              color: "#fff",
              formatter: function (value) {
                if (value < 0) {
                  value = -value;
                } else {
                  value = value;
                }
                return value + "元";
              },
            },
          },
          {
            type: "value",
            name: "销售量",
            position: "right",
            nameTextStyle: {
              color: "#fff",
            },
            axisLabel: {
              color: "#fff",
              formatter: function (value) {
                if (value < 0) {
                  value = -value;
                } else {
                  value = value;
                }
                return value + "";
              },
            },
          },
        ],
        series: [
          {
            name: "销售额",
            type: "bar",
            stack: "A",
            itemStyle: {
              color: "#59F7FF",
              // 阴影的大小
              shadowBlur: 2,
              // 阴影水平方向上的偏移
              shadowOffsetX: 2,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 0,
              // 阴影颜色
              shadowColor: "rgba(96,186,255, 0.6)",
            },
            data: [],
            yAxisIndex: 0,
            emphasis: {
              //
              itemStyle: {
                shadowBlur: 20,
                shadowColor: "rgba(0,0,0,0.3)",
              },
            },
          },
          {
            name: "销售量",
            type: "bar",
            stack: "B",
            itemStyle: {
              color: "#FF9B79",
              // 阴影的大小
              shadowBlur: 2,
              // 阴影水平方向上的偏移
              shadowOffsetX: 2,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 0,
              // 阴影颜色
              shadowColor: "rgba(255,169,139, 0.6)",
            },
            data: [],
            yAxisIndex: 1,
            emphasis: {
              //
              itemStyle: {
                shadowBlur: 20,
                shadowColor: "rgba(0,0,0,0.3)",
              },
            },
          },
          {
            name: "同期销售额",
            type: "bar",
            stack: "A",
            itemStyle: {
              color: "#50B4FF",
              // 阴影的大小
              shadowBlur: 2,
              // 阴影水平方向上的偏移
              shadowOffsetX: 2,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 0,
              // 阴影颜色
              shadowColor: "rgba(160,247,248, 0.6)",
            },
            data: [],
            yAxisIndex: 0,
            emphasis: {
              //
              itemStyle: {
                shadowBlur: 20,
                shadowColor: "rgba(0,0,0,0.3)",
              },
            },
          },
          {
            name: "同期销售量",
            type: "bar",
            stack: "B",
            itemStyle: {
              color: "#FFDB6D",
              // 阴影的大小
              shadowBlur: 2,
              // 阴影水平方向上的偏移
              shadowOffsetX: 2,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 0,
              // 阴影颜色
              shadowColor: "rgba(255,223,131, 0.6)",
            },
            data: [],
            yAxisIndex: 1,
            emphasis: {
              //
              itemStyle: {
                shadowBlur: 20,
                shadowColor: "rgba(0,0,0,0.3)",
              },
            },
          },
        ],
      },
      // 表头数据
      titleList: [
        {
          class: "table-title-long text-size",
          title: "时间",
          value: "day",
        },
        {
          class: "table-title-long text-size",
          title: "销售额",
          value: "nowMoney",
        },
        {
          class: "table-title-long text-size",
          title: "同期销售额",
          value: "lastMoney",
        },
        {
          class: "table-title-long text-size",
          title: "销售量",
          value: "nowNum",
        },
        {
          class: "table-title-long text-size",
          title: "同期销售量",
          value: "lastNum",
        },
      ],
      // 饼状图
      options: {
        title: {
          show: true,
          text: '',
          left: '54%',
          top: 'center',
          textStyle:{
            color:'#fff',
            fontWeight :'bold',
              fontFamily:'Microsoft YaHei'
          }
        },
        color: ["#05CFF7", "#177BEE", "#EAB966", "#6CD06A", "#CDDEE1"],
        // tooltip: {
        //   trigger: "item",
        // },
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c}元 ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          textStyle: {
                color: "#fff", // 文字的颜色
                // fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
                // fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
              },
          // formatter: function (name) {
          //       return `${name}销售额：${objVal[name]}元`;
          //   }
        },
        series: [
          {
            type: "pie",
            // radius: "95%",
            center: ['65%', '50%'],
            radius: ["60%", "90%"],
            labelLine: {
              length: 30,
            },
            padAngle: 2,
            label: {
              show: false,
              position: "center",
              textStyle: {
                color: "#fff", // 文字的颜色
                // fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
                // fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
              },
            },
            data: [
              
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            tooltip: {
              axisPointer: {
                type: "none", // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
                snap: true, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
              },
              showContent: true, // 是否显示提示框浮层，默认显示
              alwaysShowContent: true, // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
              triggerOn: "mousemove", // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
              confine: true, // 是否将 tooltip 框限制在图表的区域内
              backgroundColor: "rgba(0,0,0,0.5)", // 提示框浮层的背景颜色
              //padding: 15, // 提示框浮层内边距，单位px
              // position: "left",
              textStyle: {
                color: "#fff", // 文字的颜色
                // fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
                // fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
              },
            },
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    setTabValue(data){
      this.tabValue = data;
    },
    // 销售额统计(图表)
    setEcharts(data) {
      this.optionAll.xAxis[0].data = data.map((item) => item.day);
      // 设置销售额
      this.optionAll.series[0].data = data.map((item) => item.nowMoney);
      // 设置销售量
      this.optionAll.series[1].data = data.map((item) => item.nowNum);
      // 设置同期销售额
      this.optionAll.series[2].data = data.map((item) => -item.lastMoney);
      // 设置同期销售量
      this.optionAll.series[3].data = data.map((item) => -item.lastNum);
      let that = this;
      this.optionAll.tooltip.formatter = function (params) {
        var value = params.value;
        //首先要看看params是怎样的数据结构，里面有什么内容;
        if (value < 0) {
          value = -value;
        }
        if (params.seriesName.indexOf("同期") == -1) {
          let index = 2,
            num = 0;
          if (params.componentIndex == 1) {
            index = 3;
          }
          num =
            (value - -that.optionAll.series[index].data[params.dataIndex]) /
            -that.optionAll.series[index].data[params.dataIndex];
          num = Math.floor(num * 10000) / 100
          let data = num > 0 ? "增长" : "减少";
          return `${params.seriesName}为：${value}元<br />对比同期${data}${num}%`;
        } else {
          return params.seriesName == "同期销售额"
            ? params.seriesName + "：" + value + "元"
            : params.seriesName + "：" + value;
        }
      };
      return this.optionAll;
    },
    setEcharts2(data) {
      let objVal = {}
      if (data) {
        if (this.tabValue) {
          // 配件库存
          this.options.series[0].data = data.partsList.map((item) => {
            objVal[item.partsName] = item.partsMoney
            return {
              value: item.partsMoney,
              name: item.partsName,
            };
          });
          this.options.legend.formatter = function (name) {
                return `${name}销售额：${objVal[name]}元`;
            }
          // this.options.title.text = '  配件销售额';
        } else {
          // 易损品
          this.options.series[0].data = data.vulnerablePartsList.map((item) => {
            objVal[item.partsName] = item.partsMoney
            return {
              value: item.partsMoney,
              name: item.partsName,
            };
          });
          this.options.legend.formatter = function (name) {
                return `${name}销售额：${objVal[name]}元`;
            }
          // this.options.title.text = '易损品销售额';
        }
      }
      return this.options;
    }
  },
};
</script>
<style lang="scss" scoped>
.service-view {
  height: 100%;
  width: 100%;
  //margin-top: 20px;
  .top-view {
    width: 100%;
    height: calc(50% - 10px);
    margin-bottom: 10px;
    display: flex;
    .top-left {
      height: 100%;
      width: calc(30% - 20px);
      margin-left: 10px;
    }
    .top-middle {
      width: calc(40%);
      height: 100%;
      margin-left: 10px;
      margin-right: 10px;
    }
    .top-right {
      height: 100%;
      width: calc(30% - 20px);
      margin-right: 10px;
      position: relative;
      .icon-warning{
            position: absolute;
            top: 2px;
            z-index: 2;
            right: 20px;
            font-size: 20px;
            
            i{
              color: rgb(248, 208, 19);
            }
          }
    }
  }
  .bottom-view {
    width: 100%;
    height: calc(50% - 10px);
    margin-top: 10px;
    display: flex;
    .bottom-left {
      width: calc(70% - 15px);
      height: 100%;
      margin-right: 5px;
      margin-left: 10px;
    }
    .bottom-right {
      width: calc(30% - 15px);
      margin-right: 10px;
      height: 100%;
      margin-left: 5px;
      .table-view{
        height: 50px;
        width: 100%;
        //background: #000;
        display: flex;
        justify-content: end;
        align-items: center;
        .tab-view{
          width: 63px;
          height: 25px;
          line-height: 25px;
          font-size: 14px;
          text-align: center;
          background-image: url("../../../assets/img/ytfx/btn1.png");
          background-size: cover; /* 图片覆盖整个元素，保持图片的宽高比 */
          background-repeat: no-repeat; /* 不重复图片 */
          margin-right: 10px;
        }
        .tab-view2{
          background-image: url("../../../assets/img/ytfx/btn2.png");
        }
      }
      .echarts-view{
        height: calc(100% - 50px);
        width: 100%;
      }

    }
  }
}
</style>
<style lang="scss">
.service-view
  .bottom-view
  .bottom-right
  .table-view
  .table
  .table-title
  .text-size {
  color: #0e5cc6;
  background: linear-gradient(180deg, #fff, #0e5cc6);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
}
</style>
